import React, { useState} from 'react';
import classNames from "classnames";
import s from "./login.module.less"
import {Button, Form, Input, InputNumber, message, Modal, Space} from "antd";
import {useNavigate} from "react-router";
import axios from "../../utils/axios";
function Login() {

    const [cdk,setCdk] = useState(localStorage.getItem("cdk")||"")
    const navigate = useNavigate(),
        [form] = Form.useForm(),
        [open,setOpen] = useState(false),
        [loading,setLoading] = useState(false);
    function onLogin(){
        if(cdk.trim()===""){
            message.warning("请输入卡密");
            return;
        }
        setLoading(true)
        axios.get("/hlg/getCdkType",{
            params:{
                cdk
            }
        }).then(res=>{
            if (res.type === 1){
                ActiveCdk()
            }else if(res.type === 2){
                ActiveCdk(1)
                // setOpen({
                //     cdk,
                //     duration:res.duration
                // })
            }else{
                setLoading(false)
                message.error("CDK已失效！")
            }
        }).catch(()=>{setLoading(false)})

    }
    function ActiveCdk(duration = 0){
        axios.post("/hlg/activateCDK",{
            cdk,
            duration
        }).then(res=>{
            setLoading(false)
            if(res.message){
                localStorage.setItem("cdk",cdk);
                message.success(res.message);
                axios.post("/hlg/replacePhone",{
                    cdk
                }).then(res=>{
                    sessionStorage.setItem("phoneNumber",res.phone)
                    setTimeout(()=>{
                        navigate("/vip/getCode")
                    },1000)
                })

            }
        }).catch(()=>{setLoading(false)})
    }
    function toHelp(){
        navigate("/vip/help")
    }
    function onCancel(){
        setOpen(false)
    }
    function onOk(){
        form.validateFields().then(value => {
            ActiveCdk(value.duration)
        })
    }
    return (
        <>
            <div className={s.help}>
                <Button onClick={toHelp}>登录教程</Button>
            </div>
            <div className={classNames("bg",s.fcenter)}>

                <div className={s.card}>
                    <Space direction={"vertical"} size={80}>
                        <div className={s.center}>
                            <Input placeholder={"请输入卡密"} value={cdk} onChange={e=>setCdk(e.target.value)}/>
                        </div>
                        <div className={s.center}>
                            <Button
                                type={"primary"}
                                size={"large"}
                                loading={loading}
                                onClick={onLogin}
                            >登录</Button>
                        </div>
                    </Space>
                </div>
                <Modal
                    title={"本次使用时长"}
                    open={open}
                    onCancel={onCancel}
                    onOk={onOk}
                >
                    <Form
                        form={form}
                    >
                        <div style={{display:"flex"}}>
                            <Form.Item
                                label={"激活时长"}
                                name={"duration"}
                                rules={[{required:true}]}
                            >
                                <InputNumber
                                    placeholder={"剩余时长: "+open?.duration}
                                    style={{width:"100%"}}
                                    precision={0}
                                    min={1}
                                    max={open?.duration || 0}
                                />
                            </Form.Item>
                            <div style={{padding:"5px 0 0 10px"}}>
                                小时
                            </div>
                        </div>

                    </Form>
                </Modal>
            </div>
        </>
    );
}

export default Login;